---
title: "Font Size"
description: "Utilities for controlling the font size of an element."
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/fontSize'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = { plugin }

## Usage

Control the font size of an element using the `text-{size}` utilities.

```html purple
<template preview>
  <dl class="text-violet-600">
    <div class="flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-3">xs</dt>
      <dd class="truncate text-xs font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-4">sm</dt>
      <dd class="truncate text-sm font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-5">base</dt>
      <dd class="truncate text-base font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">lg</dt>
      <dd class="truncate text-lg font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">xl</dt>
      <dd class="truncate text-xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-8 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">2xl</dt>
      <dd class="truncate text-2xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">3xl</dt>
      <dd class="truncate text-3xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">4xl</dt>
      <dd class="truncate text-4xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-7">5xl</dt>
      <dd class="truncate text-5xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-8">6xl</dt>
      <dd class="truncate text-6xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-10">7xl</dt>
      <dd class="truncate text-7xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-10">8xl</dt>
      <dd class="truncate text-8xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
    <div class="mt-8 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-10">9xl</dt>
      <dd class="truncate text-9xl font-medium">The quick brown fox jumps over the lazy dog.</dd>
    </div>
  </dl>
</template>

<p class="**text-xs** ...">The quick brown fox ...</p>
<p class="**text-sm** ...">The quick brown fox ...</p>
<p class="**text-base** ...">The quick brown fox ...</p>
<p class="**text-lg** ...">The quick brown fox ...</p>
<p class="**text-xl** ...">The quick brown fox ...</p>
<p class="**text-2xl** ...">The quick brown fox ...</p>
<p class="**text-3xl** ...">The quick brown fox ...</p>
<p class="**text-4xl** ...">The quick brown fox ...</p>
<p class="**text-5xl** ...">The quick brown fox ...</p>
<p class="**text-6xl** ...">The quick brown fox ...</p>
<p class="**text-7xl** ...">The quick brown fox ...</p>
<p class="**text-8xl** ...">The quick brown fox ...</p>
<p class="**text-9xl** ...">The quick brown fox ...</p>
```

## Responsive

To control the font size of an element at a specific breakpoint, add a `{screen}:` prefix to any existing font size utility. For example, use `md:text-lg` to apply the `text-lg` utility at only medium screen sizes and above.

```html
<p class="text-base **md:text-lg** ...">The quick brown fox jumps over the lazy dog.</p>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Font Sizes

By default, Tailwind provides 10 `font-size` utilities. You change, add, or remove these by editing the `theme.fontSize` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      fontSize: {
-       'xs': '.75rem',
-       'sm': '.875rem',
+       'tiny': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
-       '3xl': '1.875rem',
-       '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
+       '7xl': '5rem',
      }
    }
  }
```

### Providing a default line-height

You can provide a default line-height for each of your font-sizes using a tuple of the form `[fontSize, lineHeight]` in your `tailwind.config.js` file.

```js
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}
```

You can also specify a default line-height using object syntax:

```js
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', {
        lineHeight: '20px',
      }],
    }
  }
}
```

We already provide default line heights for each `.text-{size}` class.

### Providing a default letter-spacing

If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form `[fontSize, { letterSpacing, lineHeight }]` in your `tailwind.config.js` file.

```js
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}
```

### Variants

<Variants plugin="fontSize" name="text sizing" />

### Disabling

<Disabling plugin="fontSize" name="text sizing" />
